<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .writing-mode-div > div {
            border: 1px solid black;
            padding:10px;
        }

        .writing-mode-div > div {
            border: 1px solid black;
            padding:10px;
        }

        .writing-mode-div > div {
            border: 1px solid black;
        }
    </style>
  </head>
  <body>
    <!--writing-mode属性设置盒模型或文字的排列方式，其属性值可为盒模型上下文本横向的horizontal-tb、盒模型右左文本纵向的vertical-rl或盒模型左右文本纵向的vertical-lr-->
    <div class="writing-mode-div">
      <div style="writing-mode: horizontal-tb;width: 200px">
        <h2>horizontal-tb</h2>
        <p>盒模型上下文本横向</p>
      </div>

      <div style="writing-mode: vertical-rl">
        <h2>vertical-rl</h2>
        <p>盒模型右左文本纵向</p>
      </div>

      <div style="writing-mode: vertical-lr">
        <h2>vertical-lr</h2>
        <p>盒模型左右文本纵向</p>
      </div>
    </div>
    <br>

    <!--书写模式改变的同时也在改变块方向和文本方向，块方向和文本方向改变的同时不会影响到width属性和height属性的方向-->
    <div class="writing-mode-div">
      <div style="writing-mode: horizontal-tb;width: 200px">
        <h2>horizontal-tb</h2>
        <p>盒模型上下文本横向</p>
        <p>盒模型上下文本横向</p>
      </div>

      <div style="writing-mode: vertical-rl;width: 90px;margin-left: 110px">
        <h2>vertical-rl</h2>
        <p>盒模型右左文本纵向</p>
        <p>盒模型右左文本纵向</p>
      </div>
    </div>
    <br>

    <!--此时希望改变块方向和文本方向的同时设置的宽高也跟随变化怎么办？块尺寸block-size和内联尺寸inline-size出现，此外还存在外块边距margin-block-start、内内联边距padding-inline-start等属性-->
    <div class="writing-mode-div">
      <div style="writing-mode: horizontal-tb;inline-size: 300px;padding-inline: 10px">
        <h2>horizontal-tb</h2>
        <p>盒模型上下文本横向</p>
        <p>盒模型上下文本横向</p>
      </div>

      <div style="writing-mode: vertical-rl;inline-size: 300px;padding-inline: 10px">
        <h2>vertical-rl</h2>
        <p>盒模型右左文本纵向</p>
        <p>盒模型右左文本纵向</p>
      </div>
    </div>
  </body>
</html>